{% extends 'base' %}

{% block title %}
查询 {{ name }} 历史
{% endblock %}


{% block content %}
    <ul class="breadcrumb">
        <li><a href="">网站后台</a> <span class="divider">/</span></li>
        <li><a href="#">{{ name }}</a> <span class="divider">/</span></li>
        <li class="active">历史记录</li>
    </ul>
    <div class="span9">
    <p><span class="text text-error">时间段：</span>从<span class="badge">{{ start }}</span>到<span class="badge">{{ end }}</span></p>
    </div>
    <div class="span9">
        <p><b>{{ name }}</b></p>
        <canvas id="load_avg_15" width="900px" height="300px" data-type="Line" data-list="{{ data_list }}"></canvas>
    </div>
    <div class="clearfix"></div>
    <div>
        <ul class="pager">
        {% if t==1 %}
            <li class="disabled"><a href="#">前一页</a></li>
        {% else %}
        <li><a href="/{{ item }}/{{ oid }}/{{ num }}/{{ t - 1 }}/">前一页</a></li>
        {% endif %}
            <li>第{{ t }}页</li>
        {% if t==page_count or page_count==0 %}
            <li class="disabled"><a href="#">后一页</a></li>
        {% else %}
            <li><a href="/{{ item }}/{{ oid }}/{{ num }}/{{ t + 1 }}/">后一页</a></li>
        {% endif %}
            <li>共{{ page_count }}页,{{ all_list.count() }}条记录</li>
        </ul>
        <div class="btn-group dropup">
            <button class="btn btn-inverse btn-small">每页显示多少条</button>
            <button class="btn btn-info btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="/{{ item }}/{{ oid }}/10/1/">10</a></li>
              <li><a href="/{{ item }}/{{ oid }}/20/1/">20</a></li>
              <li><a href="/{{ item }}/{{ oid }}/30/1/">30</a></li>
              <li><a href="/{{ item }}/{{ oid }}/40/1/">40</a></li>
              <li><a href="/{{ item }}/{{ oid }}/50/1/">50</a></li>
              <li><a href="/{{ item }}/{{ oid }}/100/1/">100</a></li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block foot %}
   <script>
        $("canvas").each(function(){
			var $canvas = $(this);
			var ctx = this.getContext("2d");
            var data = {
                labels : {{ dates }},
                datasets : [
                    {
                        fillColor : "rgba(151,187,205,0.5)",
                        strokeColor : "rgba(151,187,205,1)",
                        pointColor : "rgba(151,187,205,1)",
                        pointStrokeColor : "#fff",
                        data : $canvas.data('list')
                    }
                ]};
			var evalString = "new Chart(ctx)." + $canvas.data("type") + "(data);";
			eval(evalString);
		});
    </script>
{% endblock %}
